<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>AJAX File Upload - Web Developer Plus Demos</title>
        <script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
        <script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
        <link rel="stylesheet" type="text/css" href="./styles.css" />
        <script type="text/javascript" >
            $(function() {
                var directory = $('#directory').val();
                var btnUpload = $('#upload');
                var status = $('#status');
                new AjaxUpload(btnUpload, {
                    action: 'upload-file.php',
                    name: 'uploadfile',
                    directory: directory,
                    onSubmit: function(file, ext) {
                        if (!(ext && /^(jpg|jpeg)$/.test(ext))) {
                            // extension is not allowed 
                            status.text('Seulement les fichier JPG');
                            return false;
                        }
                        status.text('Uploading...');
                    },
                    onComplete: function(file, response) {
                        //On completion clear the status
                        status.text('');

                        $('<li></li>').appendTo('#files').html(response).addClass('success');
                        //Add uploaded file to list
                        if (response === "success") {
                            $('<li></li>').appendTo('#files').html('<img src="./uploads/' + file + '" alt="" /><br />' + file).addClass('success');
                        } else {
                            $('<li></li>').appendTo('#files').text(file).addClass('error');
                        }
                    }
                });

            });
        </script>
    </head>
    <body>
        <div id="mainbody" >
            <input id='directory' type='text' value="nicolas"/>
            <div id="upload" ><span>Upload File<span></div>
                        
                        <span id="status" ></span> 
                        <ul id="files" ></ul>
                        </div>

                        </body>